<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>日常分析总结</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxtoolbar whiteBox actionArea contentbox">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" style="height:30px;" ms-duplex="sDate" class="layui-input Wdate"
                       onClick="WdatePicker({readOnly:true,maxDate:'%y-%M-{%d-1}'})"/>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal layui-btn-small" ms-on-click="searchData()">搜索</button>
            </div>
            <div class="layui-form-mid layui-word-aux">注*：只能显示前一天的评分数据。</div>
        </div>
    </div>
    <div class="boxmain whiteBox lrbox" style="margin-top:-90px">
        <div class="lrboxmain borderL" style="margin-left:0%">
            <div class="from-header borderB contentbox">
                <div>
                    <span class="font14"> 所属分类:</span><a id="category"><span class=" fontOrange2">日常分析总结</span></a>
                    <button class="button blueButton fr" style="margin-right:20px" onclick="exportWord()">导出word
                    </button>
                </div>
            </div>
            <div class="from-body withheader contentbox" style=" overflow: auto;">
                <div style="min-width: 200px; margin:4px auto;font-size: 20px;text-align: center;padding-top: 20px;">
                    {{scoreData.startDate}}&nbsp;&nbsp;随车机械师作业情况分析
                </div>
                <div style="min-width: 500px; margin:4px auto;padding: 20px;font-size: 16px;line-height:35px">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    {{scoreData.startDate}}，共开行交路{{scoreData.roadNum}}个，出乘随车机械师{{scoreData.userNum}}人。
                    其中得分为90-100的有{{scoreData.numOf90_100}}人，得分80-90的有{{scoreData.numOf80_90}}人，
                    得分70-80的有{{scoreData.numOf70_80}}人，得分60-70的有{{scoreData.numOf60_70}}人，
                    60分以下的有{{scoreData.numOfBelow60}}人。其中最高分为{{scoreData.maxScore}}分，
                    得分为{{scoreData.maxScore}}分的机械师分别为{{scoreData.maxScoreUser}}。
                    最低分为{{scoreData.minScore}}分，得分为{{scoreData.minScore}}分的机械师分别为{{scoreData.minScoreUser}}。具体柱状图如下所示：
                </div>
                <div id="count" style="width: 800px; height:450px; margin: 0px auto">

                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            tableDatas: [],//图片数据
            searchKey: {
                startDate: '${today}'
            },
            sDate: '${today}',
            scoreData: {
                countDatas: []
            }
        })
        avalon.scan();
        loadScoreData();
    });

    //搜索
    function searchData() {
        vm.searchKey.startDate = vm.$model.sDate;
        loadScoreData();

    }

    function loadScoreData() {
        //加载表格数据
        var dataStr = $.param(vm.$model.searchKey);
        $.ajax({
            type: 'post',
            url: '${ctx}/countDayController/selectTodayScore.action',
            data: dataStr,
            beforeSend: function () {
                layui.layer.msg('正在加载...', {time: 0, icon: 16, shade: 0.02});
            },
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                closeDialog();
                if (data.code == 0) {
                    vm.scoreData = data.data;
                    showChart();
                } else if (data.code == -1) {
                    top.showErrorMsg("数据加载失败");
                }
            }
        });

    }

    function showChart() {
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['90-100', '80-90', '70-80', '60-70', '60分以下'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    barWidth: '50px',
                    data: vm.$model.scoreData.countDatas,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3979da'
                            }, {
                                offset: 1,
                                color: '#9cd9ff'
                            }]),
                            label: {
                                position: 'top',
                                show: true
                            }
                        }
                    }
                }
            ]
        };
        showBar(option, "count");

    }

    //导出word
    function exportWord() {

        window.location.href = "${ctx}/countDayController/exportWord.action?startDate=" + vm.$model.searchKey.startDate;

    }

</script>
</body>
</html>